<template>
  <div>
    <div class="card">
      <img :src="user.pic" alt="">
      <p>{{user.name}}---{{con}}</p>
      <button @click="add">修改</button>
    </div>
  </div>
</template>
<script>
module.exports = {
  name:'user',
  // props:['user'],
  // 类型校验
  props:{
    user:{
      type:Object,
      default:{
        pic:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3308973715,567217641&fm=15&gp=0.jpg',
        name:'未登录'
      }
    },
    con:{
      type:Number,
    }
  //  单向数据流
  },
  data(){
    return{

    }
  },
  created(){
  },
  methods:{
    add(){
      this.user.pic = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605344642284&di=9b5e206d86a7d7452e43498bd297c177&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb91c7b19bffab6c20f87f66b4c7f5d4523c5612d4f12-mLYrOM_fw236'
      this.$emit('setstate','已登录')
    }
  }
  ,watch:{
    con(){
      console.log('监听')
    }
  },
  computed:{

  }
}
</script>
<style scoped>
.card{
  width: 200px;
  text-align: center;
  height: 200px;
  border-radius: 4px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.3);
}
.card img{
  width: 50%;
}
</style>
